<template>
  <div class="common-layout">
    <el-container>
      <el-header>战机游戏</el-header>
      <el-main @mousemove="mousemove" ref="elePlane">
        <my-plane :coo="coo"></my-plane>
        <img src="@/assets/game/bullit.jpeg"  class="my-bullit" :style="{top:item.y  + 'px',left:item.x + 'px'}" 
        v-for="(item,index) in bullitList" :key="index"/>
        <img src="@/assets/game/dr.jpeg"  class="my-dr" :style="{top:item.y  + 'px',left:item.x + 'px'}" 
        v-for="(item,index) in dRList" :key="index"/>
      </el-main>
    </el-container>
  </div>
</template>
  
  
  <script>
import myPlane from "@/components/game/myPlane.vue";
export default {
  name: "gameIndex",
  components: {
    myPlane,
  },
  data() {
    return {
      coo: {},
      containerHeight: 0,
      containerWidth:0,
      bullitList:[],
      dRList:[]
    };
  },
  mounted() {
    this.containerHeight = this.$refs.elePlane.$el.offsetHeight;
    this.containerWidth = this.$refs.elePlane.$el.offsetWidth;
    setInterval(()=>{
      if(this.bullitList.length > 20){
        this.bullitList.splice(0,1)
      }
      this.bullitList.push({x:this.coo.x,y:this.coo.y-25})
      this.bullitList.forEach(e=>{
        e.y = e.y-100
      })
    },150)

    setInterval(()=>{
      if(this.dRList.length > 20){
        this.dRList.splice(0,1)
      }
      let randomX = Math.floor( Math.random() * (this.containerWidth-40) + 20);
      this.dRList.push({x:randomX,y:0})
      for(let i=0;i<this.dRList.length;i++){
          let dd = this.dRList[i]
          if(dd.y >= this.containerHeight - 100){
            this.dRList.splice(i,1)
          }else{
            dd.y = dd.y+70
          }
        }



    },180)
  },
  methods: {
    mousemove(e) {
      if (e.y >= 100 && e.y <= this.containerHeight+20 && e.x >= 30 && e.x < this.containerWidth - 30) {
        this.coo = { x: e.x, y: e.y };
      }
    },
  },
};
</script>
<style scoped>
.el-header {
  background-color: antiquewhite;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.el-main {
  background-color:aliceblue;
  height: calc(100vh - 60px);
}
.my-bullit{
  width: 10px;
  height: 30px;
  /**默认位置在最下面 */
  position: absolute;
  transform: translate(-50%);
  z-index: 888;
}
.my-dr{
  width: 40px;
  height: 70px;
  /**默认位置在最下面 */
  position: absolute;
  transform: translate(-50%);
  z-index: 777;
}
</style>
  